<template>
  <div class="role">
    <el-button type="primary" class="role_btn" @click="addRole">新增用户</el-button>
    <el-table :data="tableData" v-loading="loading" @sort-change="sortChange">
      <el-table-column
        show-overflow-tooltip
        fixed
        label="序号"
        type="index"
        width="55"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="用户名" prop="userName"></el-table-column>
      <el-table-column show-overflow-tooltip label="密码" prop="rowPassword"> </el-table-column>
      <el-table-column
        show-overflow-tooltip
        sortable="custom"
        label="创建时间"
        prop="createTime"
      ></el-table-column>
      <el-table-column width="125" label="操作" fixed="right" header-align="center">
        <template #default="scope">
          <el-button
            type="danger"
            v-if="scope.row.userName !== 'admin'"
            @click="handleRemove(scope.row)"
            link
            >删除</el-button
          >
          <el-button
            type="primary"
            v-if="scope.row.userName !== 'admin'"
            @click="handleUpdate(scope.row)"
            link
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.page"
      v-model:limit="queryParams.pageSize"
    />
    <RolePop v-model:visible="roleVisible" :userInfo="userInfo" />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth.js'
import { ElMessageBox } from 'element-plus'
import Pagination from '@/components/Pagination/index.vue'
import {
  listFireUserAPI,
  updateFireUserAPI,
  insertFireUserAPI,
  deleteFireUserAPI,
} from '@/api/user.js'
import RolePop from './components/RolePop.vue'
import { Select } from '@element-plus/icons-vue'
const authStore = useAuthStore()
const router = useRouter()
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const queryParams = ref({
  pageSize: 10,
  page: 1,
  userName: 'admin',
  sorting: '1',
})
const roleVisible = ref(false)
const userInfo = ref({})

const addRole = () => {
  roleVisible.value = true
}
const handleRemove = (data) => {
  ElMessageBox.confirm('是否确认删除？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteFireUserAPI({ id: data.id }).then((res) => {
      if (res.code === 200) {
        getList()
      }
    })
  })
}
const sortChange = (data) => {
  console.log(data, 'datasortChangesortChange')
  if (data.prop === 'createTime') {
    if (data.order === 'descending') {
      queryParams.value.sorting = '2'
    } else {
      queryParams.value.sorting = '1'
    }
  }
}
const handleUpdate = (data) => {
  userInfo.value = data
  roleVisible.value = true
}

watch(
  () => {
    return queryParams
  },
  (newValue) => {
    getList()
  },
  {
    deep: true,
  },
)
watch(
  () => {
    return roleVisible.value
  },
  (newValue) => {
    if (!newValue) {
      getList()
    }
  },
  {
    deep: true,
  },
)
/** 查询列表 */
function getList() {
  loading.value = true
  listFireUserAPI(queryParams.value).then((res) => {
    tableData.value = res.data.items
    total.value = res.data.total
    loading.value = false
  })
}
onMounted(() => {
  getList()
})
defineOptions({
  name: 'role',
})
</script>

<style lang="scss" scoped>
.role {
  height: 100%;
  :deep(.el-table) {
    height: 80%;
  }
  .role_btn {
    margin-bottom: 15px;
  }
  .section_tabs {
    :deep(.el-tabs__item) {
      background-color: #fff;
    }
    :deep(.el-tabs__new-tab) {
      z-index: 1;
    }
  }
}
</style>
